import React, { useEffect, useState } from 'react';
import { Button } from 'dw-mx';
import { DateCell, DateToMoment, SelectCell, EditcellTable } from 'dw-mx-table';
import Lov from '@/pages/table/Lov';
import { Code } from 'dw-mx-extend';
import ReadonlyString from './ReadonlyString';
import ReadonlyLink from './ReadonlyLink';
import { ColFlex, FlexItem, RowFlex } from 'dw-mx-flex';
export default function EditcellTableDemo() {
    const dataSource = [
        {
            key: '0',
            name: 'Edward King 0',
            age: 32,
            address: 'London, Park Lane no. 0',
            date: '2020/02/09',
            rwzt: '2',
            ywlx: ['1', '2', '3'],
            ksmc: 'search',
        },
        {
            key: '1',
            name: 'Edward King 1',
            age: 32,
            address: 'London, Park Lane no. 1',
            date: '2020/08/09',
            rwzt: '2',
            ywlx: ['1', '2', '3'],
            ksmc: 'search',
        },
        {
            key: '0',
            name: 'Edward King 0',
            age: 32,
            address: 'London, Park Lane no. 0',
            date: '2020/02/09',
            rwzt: '2',
            ywlx: ['1', '2', '3'],
            ksmc: 'search',
        },
        {
            key: '1',
            name: 'Edward King 1',
            age: 32,
            address: 'London, Park Lane no. 1',
            date: '2020/08/09',
            rwzt: '2',
            ywlx: ['1', '2', '3'],
            ksmc: 'search',
        },
        {
            key: '0',
            name: 'Edward King 0',
            age: 32,
            address: 'London, Park Lane no. 0',
            date: '2020/02/09',
            rwzt: '2',
            ywlx: ['1', '2', '3'],
            ksmc: 'search',
        },
        {
            key: '1',
            name: 'Edward King 1',
            age: 32,
            address: 'London, Park Lane no. 1',
            date: '2020/08/09',
            rwzt: '2',
            ywlx: ['1', '2', '3'],
            ksmc: 'search',
        },
    ];

    const columns = [
        {
            title: 'name',
            dataIndex: 'name',
            width: 100,
            editable: true,
            componentType: {
                type: 'Input',
                props: { placeholder: '请输入' },
            },
        },
        {
            title: 'age',
            dataIndex: 'age',
            width: 100,
            editable: true,
            componentType: {
                type: 'InputNumber',
                props: {
                    min: 1,
                    max: 100,
                },
            },
        },
        {
            title: 'address',
            dataIndex: 'address',
            width: 200,
            editable: true,
            componentType: {
                type: 'Input.TextArea',
                props: {
                    autoSize: true,
                },
            },
        },
        {
            title: 'date',
            dataIndex: 'date',
            width: 150,
            editable: true,
            componentType: {
                type: 'DatePicker',
                props: {
                    format: 'YYYY/MM/DD',
                },
            },
            render: (value, record, index) => {
                return <DateCell value={value} mask={'YYYY/MM/DD'} />;
            },
        },
        {
            title: '任务状态',
            dataIndex: 'rwzt',
            width: 150,
            editable: true,
            componentType: {
                type: 'Select',
                props: {
                    options: Code.JSONCODE([
                        { value: '1', content: '已完成' },
                        { value: '2', content: '未完成' },
                        { value: '3', content: '已作废' },
                    ]),
                    allowClear: true,
                },
            },
            render: (value, record, index) => {
                return (
                    <SelectCell
                        value={value}
                        align={'left'}
                        options={Code.JSONCODE([
                            { value: '1', content: '已完成' },
                            { value: '2', content: '未完成' },
                            { value: '3', content: '已作废' },
                        ])}
                    />
                );
            },
        },
        {
            title: '业务类型',
            dataIndex: 'ywlx',
            width: 150,
            editable: true,
            componentType: {
                type: 'Select',
                props: {
                    options: Code.STRINGCODE('1:计划建立,2:待遇支付,3:缴费管理,4:交易处理,5:交易处理,6:匹配处理,7:计划管理,8:单位管理,9:人员管理,10:考核管理'),
                    allowClear: true,
                    mode: 'multiple',
                },
            },
            render: (value, record, index) => {
                return <SelectCell value={value} align={'left'} options={Code.STRINGCODE('1:计划建立,2:待遇支付,3:缴费管理,4:交易处理,5:交易处理,6:匹配处理,7:计划管理,8:单位管理,9:人员管理,10:考核管理')} />;
            },
        },
        {
            title: '搜索',
            dataIndex: 'ksmc',
            width: 100,
            editable: true,
            componentType: {
                type: 'Search',
                props: {
                    modalprops: {
                        searchmodal: Lov,
                        props: {},
                    },
                    searchprops: {},
                },
            },
        },
    ];

    const [data, setData] = useState(DateToMoment(dataSource, ['date'], 'YYYY/MM/DD'));

    const [selectedRowKeys, setSelectedRowKeys] = useState([]);

    const [count, setCount] = useState(2);

    useEffect(() => {
        setData(DateToMoment(data, ['date'], 'YYYY/MM/DD'));
    }, [data]);

    const rowSelection = {
        selectedRowKeys,
        onChange: (selectedRowKeys) => {
            setSelectedRowKeys(selectedRowKeys);
        },
    };

    const getTabledata = (tabledata) => {
        setData(tabledata);
    };

    //删除
    const handleDelete = () => {
        const tabledata = data;
        const result = tabledata.filter((item) => {
            if (selectedRowKeys.indexOf(item.key) == -1) {
                return item;
            }
        });
        setSelectedRowKeys([]);
        setData(result);
    };

    //新增
    const handleAdd = () => {
        const newData = {
            key: count.toString(),
            name: `Edward King ${count}`,
            age: 32,
            address: `London, Park Lane no. ${count}`,
            date: new Date(),
            rwzt: '1',
            ywlx: ['1', '2', '3'],
            ksmc: 'search',
        };
        const newsource = [...data, newData];
        setCount(count + 1);
        setData(newsource);
    };

    return (
        // <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        //     <div>
        //         <Button onClick={handleAdd} type="primary" style={{ marginBottom: 16 }}>
        //             Add a row
        //         </Button>
        //         <Button onClick={handleDelete} type="primary" style={{ marginBottom: 16 }}>
        //             删除
        //         </Button>
        //     </div>
        //     <EditcellTable heightAdaptive={true} rowSelection={{ ...rowSelection }} dataSource={data} columns={columns} getChildValues={getTabledata}></EditcellTable>
        //     <EditcellTable heightAdaptive={true} rowSelection={{ ...rowSelection }} dataSource={data} columns={columns} getChildValues={getTabledata}></EditcellTable>  
        // </div>
        <ColFlex>
            <EditcellTable heightAdaptive={true} rowSelection={{ ...rowSelection }} dataSource={data} columns={columns} getChildValues={getTabledata}></EditcellTable>
            <EditcellTable heightAdaptive={true} rowSelection={{ ...rowSelection }} dataSource={data} columns={columns} getChildValues={getTabledata}></EditcellTable>

        </ColFlex>
    );
}
